<html>
<head>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/grocery_crud/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/grocery_crud/css/ui/simple/jquery-ui-1.10.1.custom.min.css">
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery-1.10.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/grocery_crud/css/app.css">
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.core.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.widget.min.js"></script>

	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.button.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.menu.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.slider.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url()?>assets/grocery_crud/js/jquery_plugins/ui/minified/jquery.ui.datepicker.min.js"></script>
	<title></title>
</head>
<body>
	<style type="text/css">
body{
	font-size: 12px;
	font-family: DroidSans;
}
.t{
	text-align: center;
}
#nama_field_box{
	width: 420px !important;
	margin:2px auto;
	width: 370px; 
}
	</style>
<h3 class="t"><i class="fa fa-print"></i>&nbsp;CETAK</h3>
<form method="post" action="<?php echo site_url('cetak/main')?>">	
<div id="nama_field_box" class="form-field-box odd">
<input type="hidden" name="do_cetak" value="YES"/>
	<div id="nama_input_box" class="form-input-box">
		<label>Periode :</label>&nbsp;<input type="text" maxlength="100" value="" name="dt_start" id="field-dt_start"/>
		S/D
		<input type="text" maxlength="100" value="" name="dt_end" id="field-dt_end">
	</div>
	<div class="clear"></div>
</div>
<br/>
<div id="rsCount" style="width:400px;margin:0 auto;margin-left:45%;color:green;display:none"></div>
<br/>
<div style="text-align:center">
	<input disabled type="submit" value="Tampilkan" id="tampil"/><input disabled id="excel" type="submit" value="Export Excel"/><input id="atur" type="reset" value="Atur Ulang"/>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
	$('#field-dt_start').datepicker({dateFormat: 'dd/mm/yy',changeYear:true,changeMonth:true});
	$('#field-dt_end').datepicker({dateFormat: 'dd/mm/yy',changeYear:true,changeMonth:true});


	$('#field-dt_start,#field-dt_end').change(function(){
		var dt_start = $('#field-dt_start').val();
		var dt_end = $('#field-dt_end').val();
		

		if(dt_start.length && dt_end.length ){
			$('#rsCount').text('Calculating ......').show();
			$.post('<?php echo base_url()?>cetak/count',{'dt_start':dt_start,'dt_end':dt_end},function(r){
				$('#rsCount').html('Total records : <b>' + r + '</b> item.');
				if(parseInt(r) > 0)
					$('#tampil,#excel').removeAttr('disabled');
				else
					$('#tampil,#excel').attr('disabled','disabled');
			});
			
		}else{
			$('#tampil,#excel').attr('disabled','disabled');

		}
	}).change();

	$('#atur').click(function(){
		$('#tampil,#excel').attr('disabled','disabled');
		$('#rsCount').hide('');
	});
});
</script>